<template>
  <div class="layout">
    <Layout :style="{ minHeight: '100vh' }">
      <Sider collapsible
             :collapsed-width="78"
             v-model="isCollapsed">
        <div class="logo"
             @click="logoClick()">
          <i class="iconfont icon-heiwushi"></i> 鬼见筹
        </div>
        <LeftMenu @changeMenu="changeMenu" />
      </Sider>
      <Layout>
        <AdminHead />
        <Content :style="{ padding: '0 16px 16px' }">
          <Breadcrumb :style="{ margin: '16px 0' }">
            <BreadcrumbItem>首页</BreadcrumbItem>
            <BreadcrumbItem>{{Bread}}</BreadcrumbItem>

          </Breadcrumb>
          <Card>
            <div class="admin-warp">
              <router-view></router-view>
            </div>
          </Card>
        </Content>
      </Layout>
    </Layout>
    <adminChat v-if="getFrontChatShow" />

  </div>
</template>
<script>
import AdminHead from './comps/adminHead/AdminHead'
import AdminContent from './comps/adminContent/AdminContent'
import LeftMenu from './comps/leftMenu/LeftMenu'
import { getLogin } from 'server/admin_k.js'
// 聊天组件
import adminChat from 'components/common/chat/adminChat'
import { mapGetters } from 'vuex'


export default {
  data() {
    return {
      isCollapsed: false,
      Bread:'首页'
    }
  },
  computed: {
    ...mapGetters(['getAdminChatShow','getFrontChatShow']),
    menuitemClasses: function() {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : '']
    }
  },
  components: {
    AdminHead,
    AdminContent,
    LeftMenu,
    adminChat
  },
  methods: {
    logoClick() {
      this.$router.push('/front')
    },
    changeMenu(e){

      this.Bread = e.name
    }
  },
  created() {
    getLogin().then(res => {
      if (res.err_code !== 1000) {
        this.$Message.error('请先进行登录！')
        return this.$router.replace('/adminlogin')
      }
      res.data.mids = res.data.mids.split(',')

      this.$store.commit('setSataff', res.data)
      this.$show.$emit('isLogin')
      // 给服务器发送消息，让服务器保存socket
      this.$ws.send('save_staff_socket',null)
    })
  }
}
</script>

<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.admin-warp {
  height: calc(100vh - 200px);
  min-height: 600px;
  min-width: 600px;
}

/* logo区 */

.logo {
  height: 64px;
  padding: 0 5px;
  color: #eee;
  display: flex;
  /* justify-content: center; */

  align-items: center;
}
.logo .iconfont {
  font-size: 72px;
  color: var(--mian-color);

  cursor: pointer;
}
</style>
